<template>
    <div>
        <Tabs v-model="active" animated title-active-color="#00a1d6" line-width="56" swipeable @change="tabChange">
            <Tab v-for="item in photoCategoryList" :key="item.id" :title="item.title">
                <router-link tag="div" class="image" v-for="photo in photoList" :key="photo.id" 
                    :to="{ name: 'PhotoInfo', params: { id: photo.id } }">
                    <img v-lazy="image" :alt="photoList.title" width="100%" />
                    <div class="info">
                        <p v-html="photo.zhaiyao"></p>
                    </div>
                </router-link>
            </Tab>
        </Tabs>
    </div>
</template>

<script>
import Vue from 'vue';
import { Tab, Tabs, Lazyload } from 'vant';
import { getPhotoCategoryList, getPhotoListByCategoryId } from '@/services';

Vue.use(Lazyload);

export default {
    components: { Tab, Tabs },
    data() {
        return {
            active: 0,
            image: 'https://images.mihuashi.com/2021/01/05/02/087zuhho4zupshxujs4vxmhurj8cecjg/087zuhho4zupshxujs4vxmhurj8cecjg.jpg!cropped',
            photoCategoryList: null,
            photoList: null
        };
    },
    methods: {
        tabChange() {
            this.getPhotoList(this.photoCategoryList[this.active].id);
        },
        // 获取图片列表
        getPhotoList(id = 0) {
            getPhotoListByCategoryId(id)
                .then(photoList => {
                    if (photoList.length > 0) {
                        this.photoList =  photoList;
                    }
                })
                .catch(err => {
                    let category = this.photoCategoryList.find(item => item.id = id);
                    console.error(`【${category.title}】图片列表获取失败`, err.message)
                });
        }
    },
    created() {
        getPhotoCategoryList()
            .then(photoCategoryList => {
                photoCategoryList.unshift({ title: '全部', id: 0 });
                this.photoCategoryList = photoCategoryList;
                // 获取第一页数据
                this.getPhotoList(this.photoCategoryList[0].id);
            })
            .catch(err => console.error('图片分类获取失败', err.message));
    }
}
</script>

<style lang="less" scoped>
.image {
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
    position: relative;
    margin-top: 10px;
    font-size: 0;
    .info {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 1;
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        p {
            margin: 0;
            padding: 5px;
            overflow: hidden;
            box-sizing: border-box;
            font-size: 14px;
            background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
            color: #fff;
        }
    }
}
</style>